<script setup lang='ts'>
import { onMounted,ref ,reactive, markRaw} from 'vue'
import { imgBaseURL } from '../../api/baseURL'
import http from '../../api/http'
import type {IUsers} from '../../types/users'
import { Timer, Check, Close,Delete } from '@element-plus/icons-vue'
import Create from './Create.vue'
import Edit from './Edit.vue'
import { ElMessage,ElMessageBox } from 'element-plus'

const tableData:IUsers[] = reactive([])

const page=ref(1)
const size = ref(5)
const total = ref(0)

const likename=ref('')

//查询用户数据
const getUsers = ()=>{
   http.getList<IUsers>('Users/vippage',{page:page.value,size:size.value,name:likename.value})
    .then(res=>{
        tableData.length=0
        total.value=res.count
        tableData.push(...res.data)
    }).catch(err=>{
        console.log('err: ', err);

    })
}

const handleSizeChange = (val: number) => {
    size.value = val
    getUsers()
}
const handleCurrentChange = (val: number) => {
    page.value = val
    getUsers()
}

//#region 添加
const createDialogVisible = ref(false)
const create = () => { 
    createDialogVisible.value=true
}
//#endregion

//#region 修改
const formData = ref({
    userId: 0,
    loginName: '',
    loginPwd: '',
    userName: '',
    sex: '',
    birthday: new Date(),
    phone: '',
    imgId: 0,
    roleId: 0,
    status: true,
    lastTime: new Date(),
    path: '',
    roleName: '',
    deptId: 0,
    deptName: ''
})
const editDialogVisible = ref(false)
const edit = (row:IUsers) => { 
    formData.value=row
    editDialogVisible.value=true
}
//#endregion

//#region 单个删除
const del=(id:number)=>{
    http.delete('users/'+id)
    .then(res=>{
        if(res.code=='1'){
            ElMessage({
                message:res.msg,
                type:'success'
            })
            getUsers();
        }else{
            ElMessage({
                message:res.msg,
                type:'error'
            })
        }
    })
}
//#endregion

//#region 批量删除
const multipleSelection = ref<IUsers[]>([])
const handleSelectionChange = (val:IUsers[])=>{
    multipleSelection.value=val
}
const DeleteRange = () => { 
    if(multipleSelection.value.length>0){
        let ids:number[] =[]
        let names:string[]=[]
        multipleSelection.value.forEach(v=>{
            ids.push(v.userId)
            names.push(v.userName)
        })
        ElMessageBox.confirm(
            '确定删除['+names+']?',
            '',
            {
                type:'warning',
                icon:markRaw(Delete)
            }
        ).then(()=>{
            http.deleteBatch('Users/DeleteBatch',ids)
            .then(res=>{
                if(res.code=='1'){
                    ElMessage({
                        message:res.msg,
                        type:'success'
                    })
                    getUsers();
                }else{
                    ElMessage({
                        message:res.msg,
                        type:'error'
                    })
                }
            })
        }).catch(()=>{
            ElMessage({
                type:'info',
                message:'取消删除'
            })
        })
    }else{
        ElMessage('请选择需要删除的对象')
    }
}
//#endregion

//#region 组件初始化
onMounted(() => {
    getUsers();
})
//#endregion
</script>


<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
            <div class="card-header">
                <el-button type="success" @click="create()">添加会员</el-button>
                <el-button type="warning" @click="DeleteRange">批量删除</el-button>

                <el-input v-model="likename" style="max-width: 300px;margin-left: 12px;" placeholder="请输入查询条件"
                    class="input-with-select">
                    <template #append>
                        <el-button type="primary" @click="getUsers()">查询</el-button>
                    </template>
                </el-input>
            </div>
        </template>
        <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" />
            <el-table-column prop="userId" label="编号" width="80" />
            <el-table-column prop="path" label="头像" width="80">
                <template #default="{ row }">
                    <el-avatar :src="imgBaseURL + row.path" />
                </template>
            </el-table-column>
            <el-table-column prop="userName" label="姓名" width="120" />
            <el-table-column prop="sex" label="性别" width="60" />
            <el-table-column prop="phone" label="手机" width="120" />
            <el-table-column prop="birthday" label="出生日期" width="140">
                <!-- 插槽 -->
                <template #default="{ row }">
                    <div style="display: flex; align-items: center">
                        <el-icon>
                            <timer />
                        </el-icon>
                        <span style="margin-left: 10px">{{ row.birthday.substr(0, 10) }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="deptName" label="部门" width="80" />
            <el-table-column prop="roleName" label="角色" width="80" />
            <el-table-column prop="status" label="状态" width="70">
                <template #default="{ row }">
                    <el-switch v-model="row.status"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" inline-prompt disabled
                        :active-icon="Check" :inactive-icon="Close" />
                </template>
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="160">

                <template #default="{ row }">
                     <el-button type="warning" size="small" @click="edit(row)">修改</el-button>

                    <el-popconfirm width="220" :title="'确定删除【' + row.userName + '】?'" @confirm="del(row.userId)">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                        <template #actions="{ confirm, cancel }">
                            <el-button size="small" @click="cancel">取消</el-button>
                            <el-button type="primary" size="small" @click="confirm">
                                确定
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
               
            </el-table-column>
        </el-table>


        <template #footer>
            <el-pagination v-model:current-page="page" 
                v-model:page-size="size" :page-sizes="[2,5, 10, 20, 50]"
                layout="total, sizes, prev, pager, next, jumper" 
                :total="total" 
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </template>
    </el-card>


    <Create v-model="createDialogVisible" @refresh="getUsers"></Create>

    <Edit v-model="editDialogVisible" :formData="formData" @refresh="getUsers"></Edit>
</template>


<style scoped>
.highlight {
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
    animation: glow 666ms infinite alternate;
}

@keyframes glow {
    form {
        text-shadow:
            0 0 10px #1877f2,
            0 0 20px #1459b3,
            0 0 30px #179bff;
    }


    to {
        text-shadow:
            0 0 5px #1877f2,
            0 0 10px #1459b3,
            0 0 15px #179bff;
    }
}

.demo-form-inline .el-form-item {
    margin-bottom: 0px;
}


</style>